<template>
    <div>
        <button type="button" class="btn btn-link" data-toggle="modal" data-target="#groupModal" @click="getgrouplist()">登録済顧客グループを編集</button>
        <div class="modal fade" id="groupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">顧客グループ</h4>
                    </div>
                    <div class="modal-body">
                        <div id="circle"></div>
                        <ul id="tree_cGroup" class="ztree" style="max-height:450px;overflow:auto;"></ul>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'cusgroup',
    props: ['companyValue'],
    data: function () {
        return {
            gurl: {
                glist: '/suntorylink/api/groups/',
                gupdate: '/suntorylink/api/groups/'
            }
        };
    },
    watch:{
        companyValue(){
            this.getgrouplist();
        }
    },
    methods:{
        getgrouplist(){
            var vm = this;
            window.$('#circle').css('display', 'block');
            window.$.fn.zTree.destroy('tree_cGroup');
            var setting = {
                view: {
                    showIcon: false
                },
                data: {
                    simpleData: {enable: true}
                },
                edit: {
                    enable: true,
                    showRemoveBtn: function(treeId, treeNode){
                        return treeNode.isParent;
                    },
                    removeTitle: '削除',
                    showRenameBtn: function(treeId, treeNode){
                        return treeNode.isParent;
                    },
                    renameTitle: '編集'
                },
                callback: {
                    onRename: vm.zTreeOnRename,
                    onRemove: vm.zTreeOnRemove
                }
            };
            window.$.ajax({
                type: 'GET',
                data: {
                    'userCd':global.userCd,
                    'kigyoCd': this.companyValue,
                    'groupType': 1,
                    'systems': global.systemCd
                },
                url: this.gurl.glist,
                success: function(response){ 
                    window.$('#circle').css('display', 'none');
                    var treedata=[];
                    if(response.data.length>0){
                        for(var item of response.data){
                            var g = {};
                            g.id = item.clsCd;
                            g.name = item.clsName;
                            g.pId = '0';
                            treedata.push(g);
                            if(item.groups.length>0){
                                for(var subitem of item.groups){
                                    var subg = {};
                                    subg.id = subitem.groupCd;
                                    subg.name = subitem.groupName;
                                    subg.pId = g.id;
                                    treedata.push(subg);
                                }
                            }
                        }
                    }
                    if(treedata.length>0){
                        window.$.fn.zTree.init(window.$('#tree_cGroup'), setting, treedata);
                    }else{
                        window.$('#tree_cGroup').text('登録済みの顧客グループがありません');
                    }
                }
            });
        },        
        zTreeOnRename(event, treeId, treeNode, isCancel) {
            if(isCancel!==true){
                window.$.ajax({
                    type: 'PUT',
                    contentType: 'application/json;charset=utf-8',
                    data: JSON.stringify({
                        'clsName': treeNode.name.substring(0,50)
                    }),
                    url: this.gurl.gupdate+treeNode.id+'/',
                    success: function(){
                        return null;
                    }
                });
            }
        },
        zTreeOnRemove(event, treeId, treeNode) {
            window.$.ajax({
                type: 'DELETE',
                url: this.gurl.gupdate+treeNode.id+'/',
                success: function(){
                    return null;
                }
            });
        }
    }
};
</script>